import { DownOutline,UpOutline } from "antd-mobile-icons";
import {DatePicker, Toast } from "antd-mobile";
import { useEffect, useMemo, useState } from "react";
import "@/pages/month/index.css";
import classNames from "classnames";//动态修改元素类名

import axios from "axios";

// 1.导入使用仓库的相关方法
import { useSelector,useDispatch } from "react-redux";
// UseSelector:用于获取仓库中的数据
// useDispatch:用户调用仓库中的action方法

// 2.导入子仓库中修改state的方法
import {changeDate} from "@/store/modules/date"
import {incremented} from "@/store/modules/counter"
import DayTotal from "@/components/dayTotal";
import DayList from "@/components/dayList";



export default function Month() {
  const now = new Date(); //得到当前的日期时间对象

  // useState:让数据变为状态数据
  const [visible, setVisible] = useState(false);
  

  // 3.获取仓库中的数据
  let date=useSelector(state=>state.date.value);

  // 4.实例化修改仓库数据的方法
  let dispatch=useDispatch();

  let count=useSelector(state=>state.counter.value)



  // useEffect的使用
  // 一、概念：useEffect是React中自带的Hook函数,用于在React组件中创建不是由事件引起而是由渲染本身引起的操作
  //     （页面重新渲染之后，就会自动执行useEffect函数）
  // 二、使用场景：在组件渲染完毕之后就需要和服务器请求数据；修改DOM
  // 三、语法
  // useEffect(()=>{},[])
  // 1.第一个参数是一个回调函数（副作用函数）：在该函数中可以写要执行的操作
  // 2.第二个参数是一个数组：在数组中放置依赖项，不同的依赖项会影响第一个参数的执行

  // 四、具体使用
  // 1.没有依赖项：组件初始渲染完毕之后、组件更新之后执行副作用函数
  // useEffect(()=>{
  //   console.log(123)
  // },);

  // 2.依赖项为空数组:只有在初始渲染完毕之后执行
  // useEffect(()=>{
  //   console.log(456);
  // },[])

  // 3.添加特定的依赖项：组件初始渲染完毕之后、特定依赖项(其中一个)变化之后执行
  // useEffect(()=>{
  //   console.log(789);
  // },[visible,count])

  const [word,setWord]=useState("");

  // 五、具体使用场景
  // (1)发送数据请求
  // useEffect(()=>{
  //   let getData=async ()=>{
  //     let res= await axios.get("https://api.xygeng.cn/one")
  //     setWord(res.data.data.content)
  //   }
  //   getData();
  // },[])

  // (2)开启定时器，在卸载组件的时候，自动停止计时器
  // useEffect(()=>{
  //   let stop=setInterval(()=>{
  //      console.log(6666);
  //   },1000)

  //   // return后面的代码会在组件被卸载的时候执行
  //   return ()=>{
  //     clearInterval(stop);
  //   }
  // },[])



  // 渲染每月的总支出、总收入、结余
  // （1）获取仓库中账单列表数据
  let billList=useSelector(state=>state.billList.value);

  // (2)声明状态变量用于存储当前年份和月份的分组账单明细
  let [currentMonthList,setCurrentMonthList]=useState([]);

  // (3)处理数据：对数据按照月份进行分组
  // obj={
  //   "2022-09":[],
  //   "2022-10":[{},{},{}],
  //   "2022-11":[],
  // }

  // useMemo:相当于vue里面的计算属性，就是返回处理之后的数据
  let groupList=useMemo(()=>{
    let obj={};
    billList.map((item,index)=>{
      let ym=item.date.slice(0,7);//"2022-10"
      // 判断该年份和月份是否已经存在对象中
      if(ym in obj){
        obj[ym].push(item);
      }else{
        obj[ym]=[item]
      }
      return true
    })
    return obj

  },[billList])


  // (4)得到当前年份和月份字符串：2022-09
  let dateSrc=useMemo(()=>{
    let str=date.getFullYear()+"-";
    if(date.getMonth()+1<10){
      str+="0"+(date.getMonth()+1);
    }else{
      str+=date.getMonth()+1;
    }
    return str;
  },[date])


  // (5)处理数据：计算当月的总支出、总收入、结余
  // obj={
  //   pay:-200,
  //   income:1000,
  //   surplus:800
  // }
  let monthTotal=useMemo(()=>{
    let obj={
      pay:0,
      income:0,
      surplus:0
    }
    if(!groupList[dateSrc]) return obj
    // 把当月账单明细单独放在一个数组中，方便后续继续分组
    setCurrentMonthList(groupList[dateSrc]);
    groupList[dateSrc].forEach(item => {
      if(item.type==="pay"){
        obj.pay+=item.money;
      }else{
        obj.income+=item.money;
      }
    });
    obj.surplus=obj.income+obj.pay;


    return obj;
  },[groupList,dateSrc])


  // 渲染当月每日账单明细
  // (1)处理数据：根据年月日对数据进行分组
  // obj={
  //   "2022-10-22":[{},{}],
  //   "2022-10-23":[]
  // }
  let groupDayList=useMemo(()=>{
    let obj={};
    currentMonthList.map((item,index)=>{
      let ym=item.date.slice(0,10);//"2022-10"
      // 判断该年份和月份是否已经存在对象中
      if(ym in obj){
        obj[ym].push(item);
      }else{
        obj[ym]=[item]
      }
      return true
    })
    return obj
  },[currentMonthList])
  console.log("groupDayList",groupDayList)

  // (2)处理数据：计算当日总支出、总数、结余
  // obj={
  //   "2022-20-22":{
  //     pay:-88,
  //     income:100,
  //     surplus:22
  //   }
  // }
  let dayTotal=useMemo(()=>{
    let bigObj={};
    for(let key in groupDayList){
      let obj={
        pay:0,
        income:0,
        surplus:0
      };
      groupDayList[key].forEach(item=>{
        if(item.type==="pay"){
          obj.pay+=item.money;
        }else{
          obj.income+=item.money;
        }
      })
      obj.surplus=obj.income+obj.pay;
      bigObj[key]=obj;
    }

    return bigObj;



  },[groupDayList])
  console.log("dayTotal",dayTotal)




  return (
    <div>

      {/* 统计区域 */}
      <div className="total">
        <div
          className="date"
          onClick={() => {
            setVisible(true);
          }}
        >
          {date.getFullYear()} | {date.getMonth()+1}月账单 
          <span className={classNames(visible ? "hide" :"")} ><DownOutline /></span>  
          <span className={classNames(visible ? "" :"hide")} ><UpOutline /></span>
          
        </div>

        {/* 汇总 */}
        <div className="list">
          <div>
            <p>{monthTotal.pay}</p>
            <p>支出</p>
          </div>
          <div>
            <p>{monthTotal.income}</p>
            <p>收入</p>
          </div>
          <div>
            <p>{monthTotal.surplus}</p>
            <p>结余</p>
          </div>
        </div>
        {/* 选择月份组件 */}
        <DatePicker
        title='月份选择'
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
        max={now}
        precision="month"
        onConfirm={val => {
          // 5.使用修改仓库数据的方法
           dispatch(changeDate(val))
        }}
      />
      </div>

      {/* 明细区域 */}
      <div>
        {Object.keys(groupDayList).map((item,index)=><div className="day-box" key={index}>
          {/* 日期 */}
          <p>{item}</p>
          {/* 当日汇总 */}
          <DayTotal data={dayTotal[item]}/>
          
          {/* 当日明细 */}
          <DayList data={groupDayList[item]}/>
        </div>)}
        

      </div>


    </div>
  );
}
